<template>
  <xdh-echarts :options="options" width="100%" height="88%"></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'

  export default {
    name: 'pie-two',
    components: {
      XdhEcharts
    },
    directives: {},
    props: {
      seriesData: {
        type: Array,
        default() {
          return []
        }
      },
      // 是否显示总和
      showSum: {
        type: Boolean,
        default: false
      },
      // 单位
      unit: {
        type: String,
        default: ''
      }
    },
    mixins: [],
    data() {
      let _sum = 0
      this.seriesData.forEach(item => {
        _sum += (item.value || 0)
      })
      return {
        options: {
          title: {
            show: this.showSum,
            text: '{t1|总人数}\n' + _sum + this.unit,
            x: 'center',
            y: 'center',
            textStyle: {
              align: 'center',
              color: '#fff',
              rich: {
                t1: {
                  fontWeight: 'normal',
                  fontSize: '24px',
                  lineHeight: 22,
                  align: 'center'
                }
              }
            }
          },
          color: ['#9a75be', '#5ebfcd', '#f1b217'],
          series: [
            {
              type: 'pie',
              startAngle: 60,
              radius: ['40%', '62%'],
              labelLine: {
                normal: {
                  show: true,
                  lineStyle: {
                    color: '#fff'
                  }
                }
              },
              label: {
                normal: {
                  formatter: this.showSum ? '{per|{d}%}\n{hr|}\n{b|{b}：{c}人}' : '{per|{d}%}\n{hr|}\n{b|{b}}',
                  rich: {
                    hr: {
                      width: '100%',
                      height: 0.5,
                      backgroundColor: '#fff',
                      shadowBlur: 2,
                      shadowOffsetX: 2
                    },
                    b: {
                      color: '#fff',
                      fontSize: 18,
                      lineHeight: 36
                    },
                    per: {
                      fontSize: 28,
                      fontFamily: 'Impact',
                      borderRadius: 2,
                      lineHeight: 36,
                      align: 'left',
                      fontWeight: 'bold'
                    }
                  }
                }
              },
              data: this.seriesData
            }]
        }
      }
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
    }
  }
</script>

<style scoped>

</style>
